<template>
	<view class="movice-top-style">
		<!-- <view class="detailed_main">
			<view class="detailed_left">
				<text class="detailed_left_h1">{{value.nm || "电影名称"}}</text>
				<view class="detailed_left_type">
					{{value.cat || '喜剧' | shufilter}}/{{value.dur || 120}}分钟
				</view>
				<text class="detailed_left_type" style="display: block;">{{value.rt || '2000-01-01' | formateDate('YYYY年MM月DD日')}}上映</text>
				<view class="detailed_botm">
					<view class="detailed_heart">
						<u-icon name="heart-fill" color="#F1255D" size="28"></u-icon>
						<text>想看</text>
					</view>
					<view class="detailed_want">
						<text style="color:#F1255D ;">{{value.wish || 999999 | trannumber}}</text>
						<text>人想看</text>
					</view>
				</view>
			</view>
			<image :src="value.img"></image>
		</view> -->
		<view class="detailed_main" :style="{'background-color':coverBGC,'height':value?'':'139px',}">
			<view class="cover_box">
				<view class="layout-cover" v-if="!init"></view>
				<image :src="value.img" mode="scaleToFill" v-else></image>
			</view>
			<view class="layout-info" v-if="!init">
				<view class="info-1"></view>
				<view class="info-2"></view>
				<view class="info-3"></view>
				<view class="info-4"></view>
			</view>
			<view class="info" v-else>
				<view class="name">
					{{value.nm || "电影名称"}}
				</view>
				<view class="info2">
					<view class="durAndCat">
						{{value.dur || 120}}分钟 / {{value.cat || '喜剧' | shufilter}}
					</view>
					<view class="version">
						{{value.version}}
					</view>
				</view>
				<view class="info3">
					{{value.rt || '2000-01-01' | formateDate('YYYY年MM月DD日')}}上映
				</view>
				<view class="button_box" @click="">
					<view class="button">
						<image src="/subpages/static/movieTop-canSee.png" mode="" style="width: 28rpx;height: 28rpx;margin-right: 8rpx;"></image>
						<text>想看</text>
					</view>
					<!-- <view class="button">
						<text>已想看</text>
					</view> -->
					<view class="text">
						{{value.wish || 999999 | trannumber}}<text>人想看</text>
					</view>
				</view>
			</view>
		</view>
		<!-- <canvas canvas-id="cover" style="position: absolute;top: -10000px;left: -10000px;"></canvas> -->
		<canvas canvas-id="cover" style="width: 100px;height: 134px;position: absolute;top: -10000px;left: -10000px;"></canvas>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				height: 0,
				coverBGC: '#F7F8FA',
				init:false,//封面主题色计算完成
			}
		},
		props: {
			value: {
				type: Object,
				default: {}
			}
		},
		mounted() {
			this.height = this.$common.setWidthHeight()
		},
		methods:{
			// 颜色合成
			colourBlend(c1, c2, ratio){
			    ratio = Math.max(Math.min(Number(ratio), 1), 0)
			    let r1 = parseInt(c1.substring(1, 3), 16)
			    let g1 = parseInt(c1.substring(3, 5), 16)
			    let b1 = parseInt(c1.substring(5, 7), 16)
			    let r2 = parseInt(c2.substring(1, 3), 16)
			    let g2 = parseInt(c2.substring(3, 5), 16)
			    let b2 = parseInt(c2.substring(5, 7), 16)
			    let r = Math.round(r1 * (1 - ratio) + r2 * ratio)
			    let g = Math.round(g1 * (1 - ratio) + g2 * ratio)
			    let b = Math.round(b1 * (1 - ratio) + b2 * ratio)
			    r = ('0' + (r || 0).toString(16)).slice(-2)
			    g = ('0' + (g || 0).toString(16)).slice(-2)
			    b = ('0' + (b || 0).toString(16)).slice(-2)
			    return '#' + r + g + b
			},
			// rgb转hex
			rgbToString(str){
			    let result = ''
			    if (str.indexOf("#") === 0) {
			        result = str
			    } else if (str.indexOf("rgb(") === 0) {
			        const colors = str.replace(/rgb\(/g, "").replace(/\)/g, "").split(",")
			        const r = parseInt(colors[0]).toString(16).length === 1 ? "0" + parseInt(colors[0]).toString(16) : parseInt(colors[0]).toString(16)
			        const g = parseInt(colors[1]).toString(16).length === 1 ? "0" + parseInt(colors[1]).toString(16) : parseInt(colors[1]).toString(16)
			        const b = parseInt(colors[2]).toString(16).length === 1 ? "0" + parseInt(colors[2]).toString(16) : parseInt(colors[2]).toString(16)
			        result = `#${r}${g}${b}`
			    }
			    return result
			},
			// hex转rgb
			hexToRgb(hex){
			    let sColor = hex.toLowerCase();
			    //十六进制颜色值的正则表达式
			    let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
			    // 如果是16进制颜色
			    if (sColor && reg.test(sColor)) {
			        if (sColor.length === 4) {
			            let sColorNew = "#";
			            for (let i=1; i<4; i+=1) {
			                sColorNew += sColor.slice(i, i+1).concat(sColor.slice(i, i+1));    
			            }
			            sColor = sColorNew;
			        }
			        //处理六位的颜色值
			        let sColorChange = [];
			        for (let i=1; i<7; i+=2) {
			            sColorChange.push(parseInt("0x"+sColor.slice(i, i+2)));    
			        }
			        return "RGB(" + sColorChange.join(",") + ")";
			    }
			    return sColor;
			},
			// rgb转hsl
			rgbToHsl(rgb) {
				let r,g,b,temp;
				temp = rgb.substring(4,rgb.length -1)
				temp = temp.split(',')
				r = Number(temp[0])
				g = Number(temp[1])
				b = Number(temp[2])
			    r /= 255, g /= 255, b /= 255;
			    let max = Math.max(r, g, b), min = Math.min(r, g, b);
			    let h, s, l = (max + min) / 2;
			
			    if (max == min){ 
			        h = s = 0; // achromatic
			    } else {
			        let d = max - min;
			        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
			        switch(max) {
			            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
			            case g: h = (b - r) / d + 2; break;
			            case b: h = (r - g) / d + 4; break;
			        }
			        h /= 6;
			    }
			
			    return [h, s, l];
			},
			// hsl转rgb
			hslToRgb(h, s, l) {
			    let r, g, b;
			
			    if(s == 0) {
			        r = g = b = l; // achromatic
			    } else {
			        let hue2rgb = function hue2rgb(p, q, t) {
			            if(t < 0) t += 1;
			            if(t > 1) t -= 1;
			            if(t < 1/6) return p + (q - p) * 6 * t;
			            if(t < 1/2) return q;
			            if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
			            return p;
			        }
			
			        let q = l < 0.5 ? l * (1 + s) : l + s - l * s;
			        let p = 2 * l - q;
			        r = hue2rgb(p, q, h + 1/3);
			        g = hue2rgb(p, q, h);
			        b = hue2rgb(p, q, h - 1/3);
			    }
			
			    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
			},
			// 取图片的平均色或高频色===》结果无法使用
			getImgThemeColor(img){
				let canvas = uni.createCanvasContext('cover',this);
				let imgHeight = 100,
					imgWidth = 134;
				let _this = this
				
				return new Promise((resolve,reject)=>{
					uni.getImageInfo({
						src:img,
						success: (res) => {
							canvas.drawImage(res.path,0,0,imgHeight,imgWidth)
							canvas.save()
							canvas.draw(true,()=>{
								uni.canvasGetImageData({
									canvasId:'cover',
									x:0,
									y:0,
									width:imgHeight,
									height:imgWidth,
									success: (res) => {
										// console.log('res',res.data);
										let data = res.data
										let r=1,g=1,b=1;
										// // 取所有像素的平均值   =》//平均色结果不行
										// let i = 1//第几个像素
										// for(let row = 0;row < imgHeight;row++){
										// 	// 每一行
										// 	for(let col = 0;col<imgWidth;col++){
										// 		// 每一行中的每一个像素
										// 		r += data[(i-1)*4]
										// 		g += data[(i-1)*4+1]
										// 		b += data[(i-1)*4+2]
										// 		i++//下一个像素
										// 	}
										// }
										// // 每个颜色取平均值
										// r = r/(imgHeight*imgWidth)
										// g = g/(imgHeight*imgWidth)
										// b = b/(imgHeight*imgWidth)
										// // 结果取整
										// r = Math.round(r)
										// g = Math.round(g)
										// b = Math.round(b)
										// let result = {r,g,b}
										
										// 取出现最多的颜色 // ====>结果不行
										// let map = new Map()
										// let i = 1//第几个像素
										// for(let row = 0;row < imgHeight;row++){
										// 	// 每一行
										// 	for(let col = 0;col<imgWidth;col++){
										// 		// 每一行中的每一个像素
										// 		// 转为字符串储存
										// 		let rgb = data[(i-1)*4] + ',' + data[(i-1)*4+1] + ',' + data[(i-1)*4+2]
										// 		// 结果存入缓存中
										// 		if(map.get(rgb)){
										// 			let value = map.get(rgb) + 1
										// 			map.set(rgb,value)
										// 		}else{
										// 			map.set(rgb,1)
										// 		}
										// 		i++//下一个像素
										// 	}
										// }
										// //  现在map存于所有颜色的出现次数
										// // 找到出现次数最多的
										// let maxValue = 0
										// let maxKey = ''
										// map.forEach((value,key)=>{
										// 	if(value > maxValue){
										// 		maxValue = value
										// 		maxKey = key
										// 	}
										// })
										// // 返回出现次数最多的rgb字符串
										resolve()
										
									},
									fail: (fail) => {
										reject(fail)
									}
								},_this)
							})
						}
					})
				})
			},
			// 八叉树算法取图片的主题色。return的是一个由8个颜色组成的数组
			getImgThemeColorUsedOctree(img){
				let OctreeNode = function () {
				    this.isLeaf = false;
				    this.pixelCount = 0;
				    this.red = 0;
				    this.green = 0;
				    this.blue = 0;
				    this.children = [null, null, null, null, null, null, null, null];
				    this.next = null;
				}
				let root = null,
				    leafNum = 0,
				    colorMap = null,
				    reducible = null;
				function createNode(index, level) {
				    let node = new OctreeNode();
				    if (level === 7) {
				        node.isLeaf = true;
				        leafNum++;
				    } else {
				        // 将其丢到第 level 层的 reducible 链表中
				        node.next = reducible[level];
				        reducible[level] = node;
				    }
				    return node;
				}
				function addColor(node, color, level) {
				    if (node.isLeaf) {
				        node.pixelCount += 1;
				        node.red += color.r;
				        node.green += color.g;
				        node.bllue += color.b;
				    }
				    else {
				        let str = "";
				        let r = color.r.toString(2);
				        let g = color.g.toString(2);
				        let b = color.b.toString(2);
				        while (r.length < 8) r = '0' + r;
				        while (g.length < 8) g = '0' + g;
				        while (b.length < 8) b = '0' + b;
				        str += r[level];
				        str += g[level];
				        str += b[level];
				        let index = parseInt(str, 2);
				        if (null === node.children[index]) {
				            node.children[index] = createNode(index, level + 1);
				        }
				        if (undefined === node.children[index]) {
				            console.log(index, level, color.r.toString(2));
				        }
				        addColor(node.children[index], color, level + 1);
				    }
				}
				function reduceTree() {
				    // 找到最深层次的并且有可合并节点的链表
				    let level = 6;
				    while (null == reducible[level]) {
				        level -= 1;
				    }
				    // 取出链表头并将其从链表中移除
				    let node = reducible[level];
				    reducible[level] = node.next;
				    // 合并子节点
				    let r = 0;
				    let g = 0;
				    let b = 0;
				    let count = 0;
				    for (let i = 0; i < 8; i++) {
				        if (null === node.children[i]) continue;
				        r += node.children[i].red;
				        g += node.children[i].green;
				        b += node.children[i].blue;
				        count += node.children[i].pixelCount;
				        leafNum--;
				    }
				    // 赋值
				    node.isLeaf = true;
				    node.red = r;
				    node.green = g;
				    node.blue = b;
				    node.pixelCount = count;
				    leafNum++;
				}
				function buidOctree(imageData, maxColors) {
				    let total = imageData.length / 4;
				    for (let i = 0; i < total; i++) {
				        // 添加颜色
				        addColor(root, {
				            r: imageData[i * 4],
				            g: imageData[i * 4 + 1],
				            b: imageData[i * 4 + 2]
				        }, 0);
				        // 合并叶子节点
				        while (leafNum > maxColors) reduceTree();
				    }
				}
				function colorsStats(node, object) {
				    if (node.isLeaf) {
				        let r = parseInt(node.red / node.pixelCount);
				        let g = parseInt(node.green / node.pixelCount);
				        let b = parseInt(node.blue / node.pixelCount);
				        let color = r + ',' + g + ',' + b;
				        if (object[color]) object[color] += node.pixelCount;
				        else object[color] = node.pixelCount;
				        return;
				    }
				    for (let i = 0; i < 8; i++) {
				        if (null !== node.children[i]) {
				            colorsStats(node.children[i], object);
				        }
				    }
				}
				let canvas = uni.createCanvasContext('cover',this);
				let imgHeight = 100,
					imgWidth = 134;
				let _this = this
				return new Promise((resolve,reject)=>{
					uni.getImageInfo({
						src:img,
						success: (res) => {
							canvas.drawImage(res.path,0,0,imgHeight,imgWidth)
							canvas.save()
							canvas.draw(true,()=>{
								uni.canvasGetImageData({
									canvasId:'cover',
									x:0,
									y:0,
									width:imgHeight,
									height:imgWidth,
									success: (res) => {
										// console.log('res',res.data);
										let data = res.data
										root = new OctreeNode();
										colorMap = {};
										reducible = {};
										leafNum = 0;
										buidOctree(data, 8)
										colorsStats(root, colorMap)
										let arr = [];
										for (let key in colorMap) {
											arr.push(key);
										}
										arr.sort(function (a, b) {
											return colorMap[a] - colorMap[b];
										})
										arr.forEach(function (item, index) {
											arr[index] = item.split(',')
										})
										// console.log(arr);
										// resolve(arr)
										//  ---将结果（8个颜色组成的数组）混合成一个颜色返回 --------
										let colorArr2 = []
										arr.forEach((i)=>{
											let t,t2
											t = 'rgb('+i[0]+','+i[1]+','+i[2]+')'
											t2 = _this.rgbToString(t)
											colorArr2.push(t2)
										})
										// console.log(arr,colorArr2);
										let result = colorArr2[0]
										colorArr2.forEach((i,index)=>{
											if(index == 0){
												result = i
											}else{
												result = _this.colourBlend(result,i,0.5)
											}
										})
										// ------------------------------------------------------
										// console.log(arr[0],result);
										resolve(result)
										
									},
									fail: (fail) => {
										reject(fail)
									}
								},_this)
							})
						}
					})
				})
			},
			// 中位切分法取图片主题色。return的是一个由8个颜色组成的数组
			getImgThemeColorUsedMid(img){
				function ColorBox(colorRange, total, data) {
					this.colorRange = colorRange;
					this.total = total;
					this.data = data;
					this.volume = (colorRange[0][1] - colorRange[0][0]) * (colorRange[1][1] - colorRange[1][0]) * (colorRange[2][1] - colorRange[2][0]);
					this.rank = this.total * (this.volume);
				}
				ColorBox.prototype.getColor = function () {
					let total = this.total;
					let data = this.data;
					let redCount = 0,
						greenCount = 0,
						blueCount = 0;
					for (let i = 0; i < total; i++) {
						redCount += data[i * 4];
						greenCount += data[i * 4 + 1];
						blueCount += data[i * 4 + 2];
					}
					return [parseInt(redCount / total), parseInt(greenCount / total), parseInt(blueCount / total)];
				}
				// 获取切割边
				function getCutSide(colorRange) {   // r:0,g:1,b:2
					let arr = [];
					for (let i = 0; i < 3; i++) {
						arr.push(colorRange[i][1] - colorRange[i][0]);
					}
					return arr.indexOf(Math.max(arr[0], arr[1], arr[2]));
				}
				// 切割颜色范围
				function cutRange(colorRange, colorSide, cutValue) {
					let arr1 = [];
					let arr2 = [];
					colorRange.forEach(function (item) {
						arr1.push(item.slice());
						arr2.push(item.slice());
					})
					arr1[colorSide][1] = cutValue;
					arr2[colorSide][0] = cutValue;
					return [arr1, arr2];
				}
				// 找到出现次数为中位数的颜色
				function getMedianColor(colorCountMap, total) {
					let arr = [];
					for (let key in colorCountMap) {
						arr.push({
							color: parseInt(key),
							count: colorCountMap[key]
						})
					}
					let sortArr = __quickSort(arr);
					let medianCount = 0;
					let medianColor = 0;
					let medianIndex = Math.floor(sortArr.length / 2)
					for (let i = 0; i <= medianIndex; i++) {
						medianCount += sortArr[i].count;
					}
					return {
						color: parseInt(sortArr[medianIndex].color),
						count: medianCount
					}
					// 另一种切割颜色判断方法，根据数量和差值的乘积进行判断，自己试验后发现效果不如中位数方法，但是少了排序，性能应该有所提高
					// let count = 0;
					// let colorMin = arr[0].color;
					// let colorMax = arr[arr.length - 1].color
					// for (let i = 0; i < arr.length; i++) {
					//     count += arr[i].count;
					//     let item = arr[i];
					//     if (count * (item.color - colorMin) > (total - count) * (colorMax - item.color)) {
					//         return {
					//             color: item.color,
					//             count: count
					//         }
					//     }
					// }
					return {
						color: colorMax,
						count: count
					}
					function __quickSort(arr) {
						if (arr.length <= 1) {
							return arr;
						}
						let pivotIndex = Math.floor(arr.length / 2),
							pivot = arr.splice(pivotIndex, 1)[0];
						let left = [],
							right = [];
						for (let i = 0; i < arr.length; i++) {
							if (arr[i].count <= pivot.count) {
								left.push(arr[i]);
							}
							else {
								right.push(arr[i]);
							}
						}
						return __quickSort(left).concat([pivot], __quickSort(right));
					}
				}
				// 切割颜色盒子
				function cutBox(colorBox) {
					let colorRange = colorBox.colorRange,
						cutSide = getCutSide(colorRange),
						colorCountMap = {},
						total = colorBox.total,
						data = colorBox.data;
					// 统计出各个值的数量
					for (let i = 0; i < total; i++) {
						let color = data[i * 4 + cutSide];
						if (colorCountMap[color]) {
							colorCountMap[color] += 1;
						}
						else {
							colorCountMap[color] = 1;
						}
					}
					let medianColor = getMedianColor(colorCountMap, total);
					let cutValue = medianColor.color;
					let cutCount = medianColor.count;
					let newRange = cutRange(colorRange, cutSide, cutValue);
					let box1 = new ColorBox(newRange[0], cutCount, data.slice(0, cutCount * 4)),
						box2 = new ColorBox(newRange[1], total - cutCount, data.slice(cutCount * 4))
					return [box1, box2];
				}
				// 队列切割
				function queueCut(queue, num) {
					while (queue.length < num) {
						queue.sort(function (a, b) {
							return a.rank - b.rank
						});
						let colorBox = queue.pop();
						let result = cutBox(colorBox);
						queue = queue.concat(result);
					}
					return queue.slice(0, 8)
				}
				// -------------------------------------------------------
				let canvas = uni.createCanvasContext('cover',this);
				let imgHeight = 100,
					imgWidth = 134;
				let _this = this
				return new Promise((resolve,reject)=>{
					uni.getImageInfo({
						src:img,
						success: (res) => {
							canvas.drawImage(res.path,0,0,imgHeight,imgWidth)
							canvas.save()
							canvas.draw(true,()=>{
								uni.canvasGetImageData({
									canvasId:'cover',
									x:0,
									y:0,
									width:imgHeight,
									height:imgWidth,
									success: (res) => {
										// console.log('res',res.data);
										let imageData = res.data
										let total = imageData.length / 4;
										// ​let rMin = 255,
										// 	rMax = 0,
										// 	gMin = 255,
										// 	gMax = 0,
										// 	bMin = 255,
										// 	bMax = 0;
										let rMin = 255
										let rMax = 0
										let gMin = 255
										let gMax = 0
										let bMin = 255
										let bMax = 0
										// 获取范围
										for (let i = 0; i < total; i++) {
											let red = imageData[i * 4],
												green = imageData[i * 4 + 1],
												blue = imageData[i * 4 + 2];
											if (red < rMin) {
												rMin = red;
											}
											if (red > rMax) {
												rMax = red;
											}
											if (green < gMin) {
												gMin = green;
											}
											if (green > gMax) {
												gMax = green;
											}
											if (blue < bMin) {
												bMin = blue;
											}
											if (blue > bMax) {
												bMax = blue;
											}
										}
										let colorRange = [[rMin, rMax], [gMin, gMax], [bMin, bMax]];
										let colorBox = new ColorBox(colorRange, total, imageData);
										let colorBoxArr = queueCut([colorBox], 8);
										let colorArr = [];
										for (let j = 0; j < colorBoxArr.length; j++) {
											colorBoxArr[j].total && colorArr.push(colorBoxArr[j].getColor())
										}
										// ---将结果（8个颜色组成的数组）混合成一个颜色返回
										let colorArr2 = []
										colorArr.forEach((i)=>{
											let t,t2
											// console.log(i);
											t = 'rgb('+i[0]+','+i[1]+','+i[2]+')'
											t2 = _this.rgbToString(t)
											colorArr2.push(t2)
										})
										// console.log(colorArr,colorArr2);
										let result = colorArr2[0]
										colorArr2.forEach((i,index)=>{
											if(index == 0){
												result = i
											}else{
												result = _this.colourBlend(result,i,0.5)
											}
										})
										// ------------------------------------------------------
										// console.log(colorArr[0],result);
										resolve(result)
										
									},
									fail: (fail) => {
										reject(fail)
									}
								},_this)
							})
						}
					})
				})
			}
		},
		watch:{
			'value':{
				handler(v){
					if(v){
						// 使用中位切分法获得图片主题色
						let t1 = Date.now()
						let t2
						console.log('得到图片的时间===》',t1);
						this.getImgThemeColorUsedMid(v.img).then((res)=>{
							// ----------调整主题色的亮度和饱和度（rgb转hsl来调整）----------
							res = this.rgbToHsl(this.hexToRgb(res))//rgb转hsl
							// console.log(res);
							if(res[1] > 0.5){
								res[1] = 0.5
							}
							if(res[2] < 0.3){
								res[2] = 0.3
							}
							if(res[2] > 0.6){
								res[2] = 0.6
							}
							// console.log(res);
							res = this.hslToRgb(res[0],res[1],res[2])
							res = this.rgbToString(`rgb(${res[0]},${res[1]},${res[2]})`)
							// -------------------------------------------------------------
							t2 = Date.now()
							console.log('计算得到图片主题的时间===》',t2);
							console.log('共计用时===》',t2 - t1,'ms');
							this.coverBGC = res
							this.init = true
						},(rej)=>{})
						
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.movice-top-style {
	// 	.detailed_main {
	// 		padding: 20rpx;
	// 		height: auto;
	// 		display: flex;
	
	// 		.detailed_left {
	// 			flex: 1;
	
	// 			.detailed_left_h1 {
	// 				font-size: 38rpx;
	// 				color: #000000;
	// 				font-weight: bold;
	// 			}
	
	// 			.detailed_left_type {
	// 				font-size: 24rpx;
	// 				color: #666666;
	// 				margin-top: 20rpx;
	// 			}
	
	// 			.detailed_botm {
	// 				display: flex;
	// 				margin-top: 40rpx;
	// 				width: 350rpx;
	// 				height: 70rpx;
	// 				background-color: #f4f5f5;
	// 				padding: 20rpx;
	// 				border-radius: 300rpx;
	// 				font-size: 28rpx;
	// 				box-sizing: border-box;
	// 				align-items: center;
	// 				justify-content: center;
	
	// 				.detailed_heart {
	// 					flex: 1;
	
	// 					u-icon {
	// 						margin-right: 10rpx;
	// 					}
	// 				}
	// 			}
	// 		}
	
	// 		image {
	// 			width: 200rpx;
	// 			height: 270rpx;
	// 			border-radius: 15rpx;
	// 			border: 1rpx solid #fff;
	// 		}
	// 	}
		.detailed_main {
			margin: 20rpx 40rpx 0 68rpx;
			display: flex;
			justify-content: flex-start;
			align-items: flex-end;
			
			border-radius: 12rpx;
			
			// transition: background-color 0.5s;
			.cover_box {
				position: relative;
				top: -20rpx;
				left: -28rpx;
				
				width: 200rpx;
				height: 268rpx;
				border-radius: 12rpx;
				
				image {
					width: 200rpx;
					height: 268rpx;
					border-radius: 12rpx;
				}
			}
			.info {
				padding: 20rpx 20rpx 20rpx 0;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 8.5rem;
				
				color: #F7F8FA;
				// transition: color 0.5s;
				.name {
					display: flex;
					align-items: center;
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
				}
				.info2 {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					.version {
						padding: 4rpx 8rpx;
						background: rgba(255,255,255,0.15);
						border-radius: 4rpx;
						margin-left: 14rpx;
						
						font-size: 22rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
					}
				}
				.info3 {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
				}
				.button_box {
					display: flex;
					align-items: center;
					.button {
						display: flex;
						align-items: center;
						justify-content: flex-start;
						padding: 4rpx 32rpx;
						background: rgba(255,255,255,0.25);
						border-radius: 8rpx;
						
						font-size: 12px;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
					}
					.text {
						margin-left: 24rpx;
						
						font-size: 20rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						text {
							font-size: 16rpx;
							font-weight: 400;
						}
					}
				}
			}
		}
	}
	
	
	.layout-cover {
		width: 200rpx;
		height: 268rpx;
		background: #F6F6F6;
		border-radius: 12rpx;
	}
	.layout-info {
		padding: 20rpx 20rpx 20rpx 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 8.5rem;
		.info-1,.info-2,.info-3,.info-4{
			width: 272rpx;
			height: 40rpx;
			background: #F6F6F6;
			border-radius: 4rpx;
		}
		.info-2 {
			width: 194rpx;
			height: 28rpx;
		}
		.info-3 {
			width: 268rpx;
			height: 28rpx;
		}
		.info-4 {
			width: 176rpx;
		}
	}
</style>
